<template>
    <pollute-group 
      v-if="type === 'group'"
      :checkedKeys="checkedKeys"
      :width="width"
      :accordion="accordion"
      :dataGrid="groupList"
      :show-checkbox="showCheckbox"
      @change="changePolluteGroup">
    </pollute-group > 
    <pollute-panel 
      v-else
      :width="width"
      @change="changePollutePanel"
      :show-checkbox="showCheckbox"
      :filterable="filterable"
      :dataGrid="panelList"
      :checkedKeys="checkedKeys">
    </pollute-panel>
</template>
<script>
import polluteGroup from './group';
import PollutePanel from './panel';
export default {
  name: 'PolluteSelect',
  props: {
    // 控件类型，group 因子分组,panel 因子面板
    type: {
      type: String,
      default: 'group'
    },
    width: {
      type: Number,
      default: 200
    },
    accordion: { // 是否每次只展开一层
      type: Boolean,
      default: false
    },
    defaultCheckedNum: {
      type: Number | String,
      default: 8
    },
    showCheckbox: {
      type: Boolean,
      default: true
    },
    pointCode: String,
    checkedKeys: {
      type: Array,
      default: () => []
    },
    filterable: {
      type: Boolean,
      default: false
    }
  },
  components: {
    polluteGroup,
    PollutePanel
  },
  data() {
    return {
      dataGrid: [],
      dataList: [],
      groupList: [],
      panelList: []
    };
  },
  watch: {
    dataList() {
      if (this.type === 'group') {
        this.dataGrid = this.dataList.map(item => {
          return {
            label: item.groupname,
            id: item.groupid + '',
            childshow: false,
            checked: false,
            children: item.polluteList.map(v => {
              return {
                data: v,
                checked: false,
                parentID: item.groupid + '',
                label: v.pollutename,
                id: v.pollutecode,
                // pollconCunit: v.pollconCunit,
                // pollconCunitVol: v.pollconCunitVol,
                children: []
              };
            })
          };
        });
      } else {
        this.dataGrid = this.dataList;
      }
      this.$emit('data-load', this.dataGrid);
    }
  },
  computed: {
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    }
  },
  methods: {
    changePolluteGroup(val) {
      this.$emit('change', val);
    },
    changePollutePanel(val) {
      this.$emit('change', val);
    },
    reload(param) {
      if (this.type === 'group') {
        this.getGroupData(param);
      } else {
        this.getPanelData(param);
      }
    },
    getPanelData(param = {}) {
      const params = Object.assign({
        pointid: 1,
        pollutetype: '',
        typeCode: 21
      }, param);
      const httpDataOption = {
        url: '/service-monitor/pullutelist/search',
        type: 'post',
        params
      };
      this.$ajax(httpDataOption).then(resp => {
        const { success, data } = resp;
        if (success) {
          this.dataList = data.data;
        }
      });
    },
    getGroupData(param = {}) {
      const params = Object.assign({
        pointid: 1,
        pollutetype: '',
        typeCode: 21
      }, param);
      const httpDataOption = {
        url: '/service-monitor/pullutetree/list',
        type: 'post',
        params
      };
      this.$ajax(httpDataOption).then(resp => {
        const { success, data } = resp;
        if (success) {
          this.dataList = data.data;
        }
      });
    }
  },
  created() {
    if (this.type === 'group') {
      this.getGroupData();
    } else {
      this.getPanelData();
    }
  }

};
</script>

<style>

</style>